<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        .wrap{width:464px;height:34px;margin:20px auto;border:0;position:absolute;}
        .input{position:absolute;top:0;left:0;width:457px;margin:0;padding-left:5px;height:30px;line-height:30px;font-size:12px;border:1px solid #c9cacb;}
        s{position:absolute;top:1px;right:0;width:32px;height:32px;background:url("<%=path%>/static/images/arrow.png") no-repeat;}
        ._citys { width: 450px; display: inline-block; border: 2px solid #eee; padding: 5px; position: relative; }
        ._citys span { color: #05920a; height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 10px; top: 10px; border: 1px solid #05920a; cursor: pointer; }
        ._citys0 { width: 95%; height: 34px; line-height: 34px; display: inline-block; border-bottom: 2px solid #05920a; padding: 0px 5px; font-size:14px; font-weight:bold; margin-left:6px; }
        ._citys0 li { display: inline-block; line-height: 34px; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; }
        ._citys1 { width: 100%; display: inline-block; padding: 10px 0; }
        ._citys1 a { width: 83px; height: 35px; display: inline-block; background-color: #f5f5f5; color: #666; margin-left: 6px; margin-top: 3px; line-height: 35px; text-align: center; cursor: pointer; font-size: 12px; border-radius: 5px; overflow: hidden; }
        ._citys1 a:hover { color: #fff; background-color: #05920a; }
        .AreaS { background-color: #05920a !important; color: #fff !important; }
    </style>
</head>
<body>
<div class="wrap"><input class="input" name="" id="city" type="text" placeholder="请选择" autocomplete="off" readonly="true"><s></s></div>
<script src="<%=path%>/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/Popt.js"></script>
<script type="text/javascript">
    $(function(){
        var provinceName=null;
        var cityName=null;
        var provinceId=null;
        var cityId=null;
        $("#city").click(function (e) {
            SelCity(this,e);
        });
        $("s").click(function (e) {
            SelCity(document.getElementById("city"),e);
        });
        //显示省份
        function SelCity(obj, e) {
            var ths = obj;
            var dal = '<div class="_citys"><span title="关闭" id="cColse" >×</span><div id="_citysheng" class="_citys0">请选择省份</div><div id="_citys0" class="_citys1"></div><div style="display:none" id="_citys1" class="_citys1"></div><div style="display:none" id="_citys2" class="_citys1"></div></div>';
            Iput.show({
                id: ths,
                event: e,
                content: dal,
                width: "470"
            });
            $("#cColse").click(function() {
                Iput.colse()
            });
            var tb_province = [];
            var data=${requestScope.provinces};
            $(data).each(function () {
                tb_province.push('<a data-id="' + this.id + '" data-name="' + this.name + '" title="' + this.name + '">' + this.name + '</a>')
            });
            $("#_citys0").append(tb_province.join(""));//把省显示出来
            $("#_citys0 a").click(function() {
                provinceName=$(this).data("name");
                provinceId=$(this).data("id");
                var g = getCity($(this));//调用查询城市的方法
                $("#_citys1 a").remove();//清除之前的省
                $("#_citys1").append(g);//把市放进去
                $("._citys1").hide();
                $("._citys1:eq(1)").show();
                $("#_citys0 a,#_citys1 a,#_citys2 a").removeClass("AreaS");
                $(this).addClass("AreaS");
                var lev = $(this).data("name");
                ths.value = $(this).data("name");
                if (document.getElementById("hcity") == null) {
                    var hcitys = $('<input>', {
                        type: 'hidden',
                        name: "hcity",
                        "data-id": $(this).data("id"),
                        id: "hcity",
                        val: lev
                    });
                    $(ths).after(hcitys)
                } else {
                    $("#hcity").val(lev);
                    $("#hcity").attr("data-id", $(this).data("id"))
                }
                $("#_citys1 a").click(function() {
                    cityName=$(this).data("name");
                    cityId=$(this).data("id");
                    $("#_citys1 a,#_citys2 a").removeClass("AreaS");
                    $(this).addClass("AreaS");
                    var lev = $(this).data("name");
                    if (document.getElementById("hproper") == null) {
                        var hcitys = $('<input>', {
                            type: 'hidden',
                            name: "hproper",
                            "data-id": $(this).data("id"),
                            id: "hproper",
                            val: lev
                        });
                        $(ths).after(hcitys)
                    } else {
                        $("#hproper").attr("data-id", $(this).data("id"));
                        $("#hproper").val(lev)
                    }
                    var bc = $("#hcity").val();
                    ths.value = bc + "/" + $(this).data("name");

                })
            })
        }
        // 显示市
        function getCity(obj) {
            var id = obj.data('id');
            var g = '';
            $.ajax({
                url: "<%=path%>/web/garbage/findCity",
                async:false,
                type: "GET",
                data: {id: id},
                success: function (data) {
                    $(data).each(function () {
                        $("#city").append("<option  value=" + this.id + ">" + this.name + "</option>");
                        g += '<a data-id="' + this.id + '" data-name="' + this.name + '" title="' + this.name + '">' + this.name + '</a>'
                    });
                }
            });
            $("#_citysheng").html('请选择城市');
            return g
        }

    });
</script>
</body>
</html>
